﻿<UserControl
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="ABCat.UI.WPF.UI.Primitives.MetroProgressStripe" 
													Background="{StaticResource WindowBackgroundColorBrush}"
             mc:Ignorable="d" >

	<UserControl.Resources>
		<System:Double x:Key="ElementWidth">4</System:Double>
		<System:Double x:Key="ElementHeight">4</System:Double>
		<Thickness x:Key="ElementMargin">6,0,6,0</Thickness>
		<SolidColorBrush x:Key="ElementBrush" Color="Gray"/>
		<System:Double x:Key="CornerRadius">1</System:Double>
	</UserControl.Resources>

	<StackPanel x:Name="progressBar"
		HorizontalAlignment="Center"
		VerticalAlignment="Bottom"
		Clip="{Binding Clip, ElementName=asyncButton}"
		IsHitTestVisible="False"
		Orientation="Horizontal"
		UseLayoutRounding="True">
		<StackPanel.Resources>
			<Storyboard x:Key="AnimationStoryBoard" RepeatBehavior="Forever"  x:Name="AnimationStoryBoard">
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_0" Storyboard.TargetProperty="(UIElement.Opacity)">
							<EasingDoubleKeyFrame KeyTime="0" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0" />
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_1" Storyboard.TargetProperty="(UIElement.Opacity)">
							<EasingDoubleKeyFrame KeyTime="0" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="0" />
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_2" Storyboard.TargetProperty="(UIElement.Opacity)">
							<EasingDoubleKeyFrame KeyTime="0" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2.4" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="0" />
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_3" Storyboard.TargetProperty="(UIElement.Opacity)">
							<EasingDoubleKeyFrame KeyTime="0" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2.4" Value="0" />
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="0" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseOut" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
							<EasingDoubleKeyFrame KeyTime="0:0:3" Value="100">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseIn" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="0" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:1.8" Value="0">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseOut" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
							<EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="100">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseIn" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="0" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseOut" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
							<EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="100">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseIn" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="0" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="0">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseOut" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
							<EasingDoubleKeyFrame KeyTime="0:0:2.4" Value="100">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseIn" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="progressBar" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="0" Value="-50" />
							<EasingDoubleKeyFrame KeyTime="0:0:3" Value="50" />
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_4" Storyboard.TargetProperty="(UIElement.Opacity)">
							<EasingDoubleKeyFrame KeyTime="0" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="0" />
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="0" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="0">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseOut" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
							<EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="100">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseIn" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_5" Storyboard.TargetProperty="(UIElement.Opacity)">
							<EasingDoubleKeyFrame KeyTime="0" Value="0" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:1.8" Value="1" />
							<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0" />
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetName="elip_5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="0" Value="-100" />
							<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseOut" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
							<EasingDoubleKeyFrame KeyTime="0:0:2" Value="100">
								<EasingDoubleKeyFrame.EasingFunction>
									<QuarticEase EasingMode="EaseIn" />
								</EasingDoubleKeyFrame.EasingFunction>
							</EasingDoubleKeyFrame>
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
		</StackPanel.Resources>

		<StackPanel.RenderTransform>
			<TransformGroup>
				<ScaleTransform />
				<SkewTransform />
				<RotateTransform />
				<TranslateTransform />
			</TransformGroup>
		</StackPanel.RenderTransform>
		<Rectangle x:Name="elip_0"
			Height="{DynamicResource ElementHeight}"
			Margin="{DynamicResource ElementMargin}"
													RadiusX="{DynamicResource CornerRadius}"
													RadiusY="{DynamicResource CornerRadius}"
			RenderTransformOrigin="0.5,0.5" Width="{DynamicResource ElementWidth}" Fill="{DynamicResource ElementBrush}" >
			<Rectangle.RenderTransform>
				<TransformGroup>
					<ScaleTransform />
					<SkewTransform />
					<RotateTransform />
					<TranslateTransform />
				</TransformGroup>
			</Rectangle.RenderTransform>
		</Rectangle>
		<Rectangle x:Name="elip_1"
			Height="{DynamicResource ElementHeight}"
			Margin="{DynamicResource ElementMargin}"
													RadiusX="{DynamicResource CornerRadius}"
													RadiusY="{DynamicResource CornerRadius}"

			RenderTransformOrigin="0.5,0.5" Width="{DynamicResource ElementWidth}" Fill="{DynamicResource ElementBrush}">
			<Rectangle.RenderTransform>
				<TransformGroup>
					<ScaleTransform />
					<SkewTransform />
					<RotateTransform />
					<TranslateTransform />
				</TransformGroup>
			</Rectangle.RenderTransform>
		</Rectangle>
		<Rectangle x:Name="elip_2"
			Height="{DynamicResource ElementHeight}"
			Margin="{DynamicResource ElementMargin}"
													RadiusX="{DynamicResource CornerRadius}"
													RadiusY="{DynamicResource CornerRadius}"

			RenderTransformOrigin="0.5,0.5" Width="{DynamicResource ElementWidth}" Fill="{DynamicResource ElementBrush}">
			<Rectangle.RenderTransform>
				<TransformGroup>
					<ScaleTransform />
					<SkewTransform />
					<RotateTransform />
					<TranslateTransform />
				</TransformGroup>
			</Rectangle.RenderTransform>
		</Rectangle>
		<Rectangle x:Name="elip_3"
			Height="{DynamicResource ElementHeight}"
			Margin="{DynamicResource ElementMargin}"
																										RadiusX="{DynamicResource CornerRadius}"
													RadiusY="{DynamicResource CornerRadius}"

			RenderTransformOrigin="0.5,0.5" Width="{DynamicResource ElementWidth}" Fill="{DynamicResource ElementBrush}">
			<Rectangle.RenderTransform>
				<TransformGroup>
					<ScaleTransform />
					<SkewTransform />
					<RotateTransform />
					<TranslateTransform />
				</TransformGroup>
			</Rectangle.RenderTransform>
		</Rectangle>
		<Rectangle x:Name="elip_4"
			Height="{DynamicResource ElementHeight}"
			Margin="{DynamicResource ElementMargin}"
													RadiusX="{DynamicResource CornerRadius}"
													RadiusY="{DynamicResource CornerRadius}"

			RenderTransformOrigin="0.5,0.5" Width="{DynamicResource ElementWidth}" Fill="{DynamicResource ElementBrush}">
			<Rectangle.RenderTransform>
				<TransformGroup>
					<ScaleTransform />
					<SkewTransform />
					<RotateTransform />
					<TranslateTransform />
				</TransformGroup>
			</Rectangle.RenderTransform>
		</Rectangle>
		<Rectangle x:Name="elip_5"
			Height="{DynamicResource ElementHeight}"
			Margin="{DynamicResource ElementMargin}"
													RadiusX="{DynamicResource CornerRadius}"
													RadiusY="{DynamicResource CornerRadius}"

			RenderTransformOrigin="0.5,0.5" Width="{DynamicResource ElementWidth}" Fill="{DynamicResource ElementBrush}">
			<Rectangle.RenderTransform>
				<TransformGroup>
					<ScaleTransform />
					<SkewTransform />
					<RotateTransform />
					<TranslateTransform />
				</TransformGroup>
			</Rectangle.RenderTransform>
		</Rectangle>
	</StackPanel>
</UserControl>
